<!DOCTYPE html>
<html>
<head>
    <title>开方</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="">

    <link rel="stylesheet" href="/lib/weui.min.css">
    <link rel="stylesheet" href="/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/home.css">
    <link rel="stylesheet" href="/plugins/fontaw/css/font-awesome.css">
    <style>
        .kk-box{background-color: white;margin-bottom: 0.3rem}
        .kk-box a{color: #4b4a48}
        .kk-flex{display: flex}
        .col-6{width: 49%}
        .col-3{width: 23%}
        .col-10{width: 78%}
        .col-2{width: 19.66%;    text-align: -webkit-right;}
        input,select{border:none;height: 23px;line-height: 35px;padding:0px 5px}
        .input-age{padding-right: 5px;width: 40px}
        .bottom-line{ border-bottom: #f5f5f5 solid 1px}
        .block-input{display: block;width: 92%}
        .kk-btn{
            padding:3px 10px;border:green solid 1px;border-radius: 5px;
        }
        a.kk-btn{color:green;}
        .kk-block-bd{padding:0.5rem;display: block}
        .short-input{width: 20px;text-align: center;border:lightgrey solid 1px ;border-radius: 5px;color: green;line-height: 20px}
        .small-txt{font-size:14px}
        .cgray{color: grey}
        .kk-fr{float:right}
        .kk-foot{position: fixed;bottom: 0px;background-color: white;border-top: #cccccc solid 1px;}
        #medical-search{border-bottom: #cccccc solid 1px; background-color: white;line-height: 28px;height: 28px;font-size: 16px;vertical-align: -webkit-baseline-middle;}
        .short-btn{width:40px;padding:5px;border:#cccccc solid 1px;border-radius: 3px;color: #4b4a48;vertical-align: -webkit-baseline-middle;}
        .medical-s{border:#cccccc solid 1px;padding:4px 6px;background-color: #fcfcfd; border-radius: 3px;color: grey;margin-right: 5px}
        .medical-list{overflow-x: scroll;white-space: nowrap;padding:2px 4px;-webkit-overflow-scrolling: touch; overflow-y: hidden}
        .medical-cells{  box-sizing: border-box;
            display : flex;  /* 将容器设置为弹性盒子 */
            display: -webkit-flex;
            display: -ms-flexbox;
        flex-wrap: wrap}
        .medical-cell{
            width: 46%;
            padding: 3px 5px;
            background-color: white;
            border-radius: 3px;
            display: table-cell;
            height: 40px;line-height: 40px;
            border:#E1E1E1 1px solid;
        }
        .medical-cell i{color: green}
        .medical-cell .short-input{font-size: 16px}
        .fixed {
            position: fixed;
            top: 1vw;
            left: 1vw;
            right: 1vw;
            bottom: 1vw;
        }
        .weui-btn{line-height:unset;width: 50%}
        .ul_medical_list{list-style: none;padding:10px}
        .ul_medical_list li{width: 48%;float: left;text-align: center;line-height: 35px;height: 35px}
        #medicalDetails{
            background-color: #dff0d8;
            font-size: 14px;
            color: green;
            padding-bottom: 15px;
        }

        .weui-textarea{font-size:16px;margin-top: 0.4rem;background-color: #eeeeec;padding:0.3rem;color:#3d4145;width: 97%}
        textarea::-webkit-input-placeholder{
            color: #999;
        }
        textarea::-moz-placeholder{
            color: #999;
        }
        textarea:-moz-placeholder{
            color: #999;
        }
        .ul-extral{list-style: none;}
        .ul-extral li{height: 30px;line-height: 30px; width: 280px}
        .extralInput{width: 80px;height: 30px;line-height: 30px;background-color: #E1E1E1;border-radius: 5px}

        .greenFont{color:green}
        .kk-ultab{
            margin: 0px auto;padding:0px;display: flex;list-style: none;
        }
        .kk-ultab li{
           height: 40px;line-height:40px;text-align: center;flex: 1;width: 49%;background-color: #f4f4f4;
        }
        .kk-tab-current{border-bottom: green solid 3px;color:green}

        .ul-desc{list-style: none;display: flex;flex-wrap: wrap}
        .ul-desc li{height: 30px;line-height: 30px;padding:5px;margin-right: 10px;border:solid #E1E1E1 1px;border-radius: 3px;
        margin-bottom: 10px;color: grey}
        #pop-content{overflow: scroll}
        .hidediv{display: none}
    </style>

<body>
<div class="kk-container">
    <form id="dataForm" action="/prescription/save" method="post" id="dataForm">
    <div class="kk-box ">
        <div class="kk-flex bottom-line" style="text-align: left">
            <div class="col-6">
                <input placeholder="患者姓名" style="width: 100px;" name="suffererName"/>
            </div>
            <div class="col-3">
                <select style="width: 45px" name="suffererSex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="col-3">
                <input placeholder="年龄" class="input-age" name="suffererAge"/>
            </div>
        </div>
        <div class="kk-flex">
            <input class="block-input" placeholder="病、症名" name="diseaseName"/>
        </div>
    </div>

    <div class="kk-box " >
        <div class="kk-flex bottom-line" style="text-align: left">
            <span>RP:</span>
        </div>
        <div id="medicalDetails" style="display: none">
            <ul class="ul_medical_list"></ul>
            <div style="clear:both"></div>
        </div>
        <div class="kk-block-bd" style="text-align: center">
            <a href="javascript:;" class="kk-btn" onclick="popWinChooseMedical('popups/soup.html')">添加药材</a>
        </div>
    </div>

    <div class="kk-box " >
        <div class="kk-flex bottom-line small-txt" style="text-align: left">
            <p>
                共<input type="number" class="short-input" value="7" id="medicalNum" name="prescriptionCount">贴，每日
                <input type="number" class="short-input" value="1" name="prescriptionDayCnt">贴，一贴分
                <input type="number" class="short-input" value="2" name="prescriptionTimeCnt">次服用
            </p>
        </div>
        <div class="kk-block-bd bottom-line" >
            <a href="javascript:;" onclick="popWinNote()">
                <span>医嘱</span>
                <span class="kk-fr small-txt cgray" ><span id="ysyz">必填</span> <i class="fa fa-chevron-right" aria-hidden="true"></i></span>
            </a>
        </div>
        <div class="kk-block-bd bottom-line" >
            <a href="javascript:;" onclick="popWinExtral()">
                <span>方案补充收费</span>
                <span class="kk-fr small-txt cgray"><span id="extralFee" fee="0">免费</span> <i class="fa fa-chevron-right" aria-hidden="true"></i></span>
            </a>
        </div>
        <div class="kk-block-bd" >
            <a href="javascript:;">
                <span>收费前方案是否可见</span>
                <span class="kk-fr small-txt cgray"><input class="weui-switch" type="checkbox" name="seeLevel"></span>
            </a>
        </div>
    </div>

    <div class="kk-box "  style="display: none" id="feeDetail">
        <div class="kk-flex bottom-line" style="text-align: left">
            <div style="display: block">费用明细 <span class="tiny-text cgray" style="display:block;">不含运费，代煎费，药费根据医师所在地而定</span></div>
        </div>
        <div class="kk-block-bd small-txt" >
            <p>
                <span>方案补充收费</span>
                <span class="kk-fr  cgray" id="extFeeShow"></span>
            </p>
            <p>
                <span>药费</span>
                <span class="kk-fr  cgray" id="feeContent"> </span>
            </p>
            <p>
                <span>总计</span>
                <span class="kk-fr " style="color: darkred" id="totalFee"></span>
            </p>
        </div>
    </div>

    <div class="kk-box ">
        <div class="kk-block-bd" >
            <a href="javascript:;" onclick="popWinTheory()">
                <span>辨证思路</span>
                <span class="kk-fr small-txt cgray"><span id="bzsl">选填，仅自己可见</span> <i class="fa fa-chevron-right" aria-hidden="true"></i></span>
            </a>
        </div>
    </div>

    <div style="margin: 15px 0px;">
        <a class="weui-btn weui-btn_primary" href="javascript:" style="line-height:2;width:90%" onclick="saveData()" id="subBtn"> 完成 </a>
    </div>
     <div style="display: none" id="hideFields">
         <div id="hideMedicals"></div>
         <textarea id="doctorRemark" name="doctorRemark"></textarea>
         <textarea id="doctorTheory" name="doctorThink"></textarea>
         <input type="hidden" name="extralCharge" id="extralCharge"/>
         <input type="hidden" name="doctorId" id="doctorId"/>
     </div>
    </form>
</div>


<div id="full" class='weui-popup__container'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="kk-container fixed" id="pop-content"></div>
    </div>
</div>

<script src="/lib/jquery-2.1.4.js"></script>
<script src="/lib/jquery.form.js"></script>
<script src="/lib/fastclick.js"></script>
<script src="/js/home.js"></script>
<script src="/js/jquery-weui.js?v=3"></script>
<script>


    var doctorId = getQueryString("doctorId");
    function popWinChooseMedical(urlLink){
        $.ajax({
            url:urlLink,
            async:false,
            beforeSend:function(){

            },
            success:function(da){
                $("#pop-content").html(da);
            }
        });

        $("#full").kkpopup();
        $(".medical-cells").html($("#hideMedicals").html());
        $("#hideMedicals").html("");
        $("#medical-search").val("");
        $("#medical-search").focus();
        $(".scrol").html("");
        setTimeout(function(){
            document.getElementById("medical-search").scrollIntoView(true);// 参数可以是true， false, 空参数
        }, 600);
    }

    function popWinNote(){
        document.title="医嘱";
        $.ajax({
            url:"popups/medical_desc.html",
            async:false,
            beforeSend:function(){
            },
            success:function(da){
                $("#full").kkpopup();
                $("#pop-content").html(da);
                $("#doctorRemarkArea").val($("#doctorRemark").val())
            }
        });
    }

    function popWinTheory(){
        document.title="辨证思路";
        $.ajax({
            url:"popups/medical_theory.html",
            async:false,
            beforeSend:function(){
            },
            success:function(da){
                $("#full").kkpopup();
                $("#pop-content").html(da);
                $("#doctorTheoryArea").val($("#doctorTheory").val());
            }
        });
    }

    function popWinExtral(){
        document.title="方案补充收费";
        //window.history.pushState(null, null, "/mod-page/prescribe/prescribe_add_n.html#ss");
        $.ajax({
            url:"popups/extral_charge_set.html",
            async:false,
            beforeSend:function(){
            },
            success:function(da){
                $("#full").kkpopup();
                $("#pop-content").html(da);
            }
        });
    }


    $("#medicalNum").keyup(function(){
        if($(this).val()!="")
            chargeFee();
    });

    function chargeFee(){

        var extralFee = parseFloat($("#extralFee").attr("fee"));
        var medicalFee =0 ;
        var medicalNum  = $("#medicalNum").val();
        $(".medical-cell .short-input").each(function(){
            medicalFee+=parseFloat($(this).attr("price"))*parseInt($(this).val());
        });
        var medicalAll = medicalNum*medicalFee;
        $("#feeContent").text("单贴￥"+toDecimal2(medicalFee)+" * 贴数 "+medicalNum+" = ￥"+toDecimal2(medicalAll));
        $("#totalFee").text("￥"+toDecimal2(extralFee+medicalAll));
    }

    function showMedicalList(){
        var lis = "";
        $(".medical-cell").each(function(){
            lis+="<li>"+$(this).find(".mname").text()+" "+$(this).find(".short-input").val()+"g"+"</li>"
        });
        $("#hideMedicals").html($(".medical-cells").html());
        $("#medicalDetails").show().find(".ul_medical_list").html(lis);
        $("#feeDetail").show();
        $(".medical-cells").html("");
    }

    $(document).ready(function(){
        $.getJSON("/d/doctor/loadDoctorSetting",{"doctorId":doctorId},function (da) {
            if(da.msg=="ok"){
                changeExtralFee(da.data.chargeFee);
            }
        });
    });
    function changeExtralFee(fee){
        $("#extralFee").attr("fee",fee);
        $("#extralFee").text(fee==0?"免费":fee);
        $("#extFeeShow").text(fee);
        $("#extralCharge").val(fee);
    }

    
    function saveData() {
        $("#doctorId").val(doctorId);
        $("#dataForm").ajaxSubmit({
            beforeSend:function(){
                enableOrDisableBtn($("#subBtn"),false,"完成");
            },
            success:function(da){
                enableOrDisableBtn($("#subBtn"),true,"完成");
            }
        });
    }
</script>
</body>
</html>
